// 搜索框选项卡切换
class SearchTab {
    constructor() {
        this.arr_tabList = document.querySelectorAll(".search-wrap>ul li");
        this.addEvent();
    }
    addEvent() {
        for (let i = 0; i < this.arr_tabList.length; i++) {
            let index = i;
            this.arr_tabList[i].onclick = () => {
                this.render(index);
            }
        }
    }
    render(index) {
        this.arr_tabList.forEach((val) => {
            val.className = "";
        });
        this.arr_tabList[index].className = "on";
    }
}
new SearchTab;


// 公告框选项卡切换
class NoticeTab {
    constructor() {
        this.arr_tabs = document.querySelectorAll(".tabs>li");
        this.arr_items = document.querySelectorAll(".items>div");
        this.addEvent();
    }
    addEvent() {
        for (let i = 0; i < this.arr_tabs.length; i++) {
            let index = i;
            this.arr_tabs[i].onclick = () => {
                this.render(index);
            }
        }
    }
    render(index) {
        this.arr_tabs.forEach((val) => {
            val.className = "";
        });
        this.arr_tabs[index].className = "on";

        this.arr_items.forEach((val) => {
            val.className = "";
        });
        this.arr_items[index].className = "active";
    }
}
new NoticeTab;

// 二级选单数据渲染
class SubPanel {
    constructor() {
        this.arr_li = document.querySelectorAll(".nav-left>li");
        this.url = "http://localhost:3000/data/nav-min.json";
        this.data = [];
        this.arr_subPanel = [];
        this.index = 0;
        this.loadData();
    }
    loadData() {
        ajax({
            url: this.url,
            success: res => {
                this.data = JSON.parse(res);
                this.initialize();
                this.createElement();
            }
        });
    }
    initialize() {
        for (let i = 0; i < this.arr_li.length; i++) {
            const span1 = document.createElement("span");
            const span2 = document.createElement("span");
            span1.innerHTML = this.data[i].title1;
            span2.innerHTML = this.data[i].title2;
            this.arr_li[i].appendChild(span1);
            this.arr_li[i].appendChild(span2);
        }
    }
    createElement() {
        for (let i = 0; i < this.arr_li.length; i++) {
            let index = i;
            const ele_sub = document.createElement("div");
            ele_sub.className = "sub-panel";
            this.renderdata(ele_sub, index);
            this.arr_li[i].appendChild(ele_sub);
            this.arr_subPanel.push(ele_sub);
        }
    }
    renderdata(ele, index) {
        let arr = this.data[index].sub;
        for (let i = 0; i < arr.length; i++) {
            const ele_div = document.createElement("div");
            const ele_h3 = document.createElement("h3");
            ele_h3.innerHTML = arr[i].name;
            ele_div.appendChild(ele_h3);
            for (let j = 0; j < arr[i].sub.length; j++) {
                const ele_span = document.createElement("span");
                ele_span.innerHTML = arr[i].sub[j];
                ele_div.appendChild(ele_span);
            }
            ele.appendChild(ele_div);
        }
    }

}
new SubPanel;

// 推荐位数据渲染
class RecomRender {
    constructor() {
        this.arr_data = [];
        this.url = "http://localhost:3000/data/recom-min.json"
        this.ele_recom = document.querySelector(".recom-wrap>ul");
        this.load();
    }
    load() {
        ajax({
            url: this.url,
            success: res => {
                this.arr_data = JSON.parse(res);
                this.render();
            }
        });
    }
    render() {
        this.arr_data.forEach((val) => {
            let str = "";
            const length = val.tags.length;
            for (let i = 0; i < length; i++) {
                const className = val.tags[i].type;
                const name = val.tags[i].name;
                str += `<span class="${className}">${name}</span>`;
            }
            const ele_li = document.createElement("li");
            ele_li.className = "recom";
            ele_li.innerHTML =
                `<a href="#">
                <figure>
                    <img src="${val.picUrl}" alt="">
                    <span>查看详情</span>
                </figure>
                <div class="desc">
                    <div class="desc-top">
                        <span class="desc-price">￥${val.price}${val.pCurrency}</span>
                        <span class="desc-address">${val.location}</span>
                    </div>
                    <p class="desc-name">${val.fullName}</p>
                    <div class="tags">${str}</div>
                    <div class="desc-bottom">
                        <span>${val.fullProviderName}</span>
                    </div>
                </div>
            </a>`
            this.ele_recom.appendChild(ele_li);
        });
    }
}
new RecomRender;

// 专项推荐数据渲染
class List {
    constructor() {
        this.cont = document.querySelector(".cont");
        this.url = "http://localhost:3000/data/goods.json";
        this.load();
        // this.addEvent();
    }

    load() {
        ajax({
            url: this.url,
            success: res => {
                this.res = JSON.parse(res).msg;
                this.render();
            }
        });
    }
    render() {
        let str = "";
        for (let i = 0; i < 20; i++) {
            str += `<li class="prod"  index="${this.res[i].proId}">
                        <a href="./goods.html?id=${this.res[i].proId}">
                            <img src="${this.res[i].img}" alt="">
                            <figcaption>${this.res[i].proName}</figcaption>
                        </a>
                        <div class="price">
                            <p>￥<span>${this.res[i].price}</span></p>
                            <span class="add">立即购买</span>
                        </div>
                </li>`

        }
        this.cont.innerHTML = str;
    }
}
new List();

// 搜索框联想词
class AssociativeWord {
    constructor() {
        this.ele_txt = document.querySelector("#search-bar");
        this.ele_list = document.querySelector(".associative");
        this.addEvent();
    }
    addEvent() {
        const txt = this.ele_txt;
        const list = this.ele_list
        txt.oninput = function () {
            jsonp("https://suggest.taobao.com/sug", (res) => {
                let str = "";
                res.result.forEach(val => {
                    str += `<li>${val[0]}</li>`
                })
                list.innerHTML = str;
            }, {
                code: "utf-8",
                _ksTS: "1639043870035_447",
                k: 1,
                area: "c2c",
                bucketid: 0,
                callback: "ajhsjafsf",
                q: txt.value
            }, "callback");
        }
    }
}
new AssociativeWord;

